<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
<template>
  <div>
    <div class="my_box">
      <!-- <router-view></router-view> -->
      <div class="box_title">
        <div class="box_title_img">
          <img
            src="@/pages/mobile/assets/img/Setting@3x.png"
            @click="setGo"
            alt
          />
        </div>
        <div class="box_title_info">
          <p>{{ myInfoData.userName }}</p>
          <span>{{ myInfoData.orgName }}</span>
          <span>{{ myInfoData.positionJob }}</span>
          <!-- <img src="@/pages/mobile/assets/img/QR@3x.png" alt /> -->
        </div>
      </div>
      <scroll class="my_scroll_box">
        <div class="my_mission_box">
          <div class="mission_title" @click="mySolve">
            <img src="@/pages/mobile/assets/img/yichuli.png" alt />
            <span>已处理任务</span>
            <img src="@/pages/mobile/assets/img/More@3x.png" alt />
          </div>
          <div v-if="taskProcessedDataInfo.length" class="mission_info_box">
            <div
              class="mission_info"
              v-for="item in taskProcessedDataInfo"
              :key="item.id"
            >
              <img src="@/pages/mobile/assets/img/Task1@3x.png" alt />
              <div class="mission_info_title">
                <span>{{ item.busiTypeName }}</span>
                <em>{{
                  item.acceptTime | dateFormat("yyyy/MM/dd hh:mm:ss")
                }}</em>
              </div>
              <div class="mission_info_center">
                <p>{{ item.messageContent }}</p>
                <span>审批结果：</span>
                <span>{{ item.opinionText }}</span>
              </div>
            </div>
          </div>
          <div class="mission_info_nodata" v-else>
            <p>暂时没有已处理任务</p>
          </div>
        </div>
        <div class="my_mission_box_bootom"></div>
      </scroll>
    </div>
  </div>
</template>

<script>
import Scroll from "@/pages/mobile/components/JoysScroll/JoysScroll";
import JoysLoading from "@/pages/mobile/components/JoysLoading/JoysLoading";
export default {
  naem: "my",
  components: {
    JoysLoading,
    Scroll
  },
  data () {
    return {
      taskProcessedDataInfo: [],
      myInfoData: {}
    };
  },
  methods: {
    // 个人信息请求
    myInfoQuery () {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-master-data/users/self",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
      })
        .then(res => {
          this.myInfoData = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 任务列表请求
    taskProcessedData () {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-bpm/taskMessage/byCondition",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          workStatus: "ALREADY_WORK",
          pageIndex: 1,
          pageSize: 2
        }
      })
        .then(res => {
          this.taskProcessedDataInfo = res.data.rows;
          for (let key in res.data.rows) {
            this.taskProcessedResult(res.data.rows[key]);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    taskProcessedResult (rew) {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-bpm/approvals",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          task: rew.taskId
        }
      })
        .then(res => {
          this.$set(rew, "opinionText", res.data.opinionText);
        })
        .catch(error => {
          console.log(error);
        });
    },
    setGo () {
      this.$router.push({
        path: "/my/mySet"
      });
    },
    mySolve () {
      this.$router.push({
        path: "/my/mySolve"
      });
    }
  },
  mounted () {
  },
  activated () {
    this.taskProcessedData();
    this.myInfoQuery()
  },
  beforeRouteUpdate (to, from, next) {
    let isBack = this.$router.isBack;
    if (isBack) {
      this.transitionName = "slide-right";
    } else {
      this.transitionName = "slide-left";
    }
    this.$router.isBack = false;
    next();
  }
};
</script>

<style scoped lang="less">
.my_box {
  position: fixed;
  top: 0rem;
  bottom: 0.6rem;
  width: 100%;
  z-index: 180;
  overflow: hidden;
  background-color: #fbf9fe;
  .box_title {
    width: 100%;
    height: 2.3rem;
    background-image: linear-gradient(0deg, #be9457 30%, #ce993c 100%);
    -webkit-border-bottom-right-radius: 0.4rem;
    -webkit-border-bottom-left-radius: 0.4rem;
    .box_title_img {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      text-align: right;
      img {
        width: 0.2rem;
        margin-right: 0.07rem;
        padding: 0.1rem;
      }
    }
    .box_title_info {
      margin-left: 0.32rem;
      p {
        font-family: Semibold;
        font-size: 0.24rem;
        color: #ffffff;
        letter-spacing: -0.58px;
        // text-align: center;
        line-height: 0.32rem;
        margin-bottom: 0.06rem;
      }
      span {
        opacity: 0.6;
        font-family: Regular;
        font-size: 0.13rem;
        color: #ffffff;
        letter-spacing: -0.31px;
        line-height: 0.2rem;
        display: block;
        margin-bottom: 0.06rem;
      }
      img {
        margin-top: 0.15rem;
        display: block;
        width: 0.32rem;
        height: 0.32rem;
        opacity: 0.5;
        background: #ffffff;
      }
    }
  }
  .box_title::after {
    content: "";
    display: block;
    width: 100%;
    height: 60px;
    margin-top: 20px;
    background: #be9457;
    border-radius: 0 0 100% 100%;
  }
  .my_scroll_box {
    top: 2.17rem !important;
    height: 3.11rem;
    width: 100%;
    .my_mission_box {
      position: relative;
      top: 0;
      margin: 0 0.16rem;
      background: #ffffff;
      // height: 4rem;
      padding-bottom: 0.06rem;
      border-radius: 0.04rem;
      // margin: 0 0.32rem;
      .mission_title {
        height: 0.45rem;
        line-height: 0.45rem;
        padding-bottom: 0.1rem;
        text-align: center;
        img:nth-child(1) {
          padding-top: 0.04rem;
          margin-left: -0.04rem;
          height: 0.16rem;
        }
        img:nth-child(3) {
          padding-top: 0.05rem;
          margin-left: -0.02rem;
          height: 0.13rem;
        }
        span {
          font-family: Mediums;
          font-size: 0.14rem;
          color: #575757;
          letter-spacing: -0.58px;
          text-align: center;
          line-height: 0.16rem;
          font-weight: 700;
        }
      }
      .mission_info_box{
        
      .mission_info {
        background: #ffffff;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.09);
        border-radius: 0.04rem;
        margin: 0 0.16rem 0.1rem 0.16rem;
        // margin-bottom: 0.1rem;
        padding-bottom: 0.15rem;
        img {
          float: left;
          background: #d8d8d8;
          width: 0.18rem;
          height: 0.18rem;
          margin-left: 0.16rem;
        }
        .mission_info_title {
          padding-left: 0.24rem;
          padding-right: 0.16rem;
          margin: 0 0.08rem;
          border-bottom: 1px #eeeeee solid;
          padding-top: 0.2rem;
          padding-bottom: 0.3rem;

          span {
            float: left;
            font-family: Mediums;
            font-size: 0.15rem;
            color: #202f1f;
            letter-spacing: -0.41px;
          }
          em {
            float: right;
            text-align: right;
            font-family: Regular;
            font-size: 0.13rem;
            color: #adadad;
            letter-spacing: -0.36px;
            text-align: right;
          }
        }
        .mission_info_center {
          padding-left: 0.24rem;
          margin: 0 0.08rem;
          padding-top: 0.09rem;
          line-height: 0.2rem;
          padding-bottom: 0.05rem;
          p {
            font-family: Mediums;
            font-size: 0.15rem;
            color: #636363;
            letter-spacing: -0.41px;
          }
          span {
            display: inline-block;
            font-family: Regular;
            font-size: 0.13rem;
            color: #adadad;
            letter-spacing: -0.36px;
            text-align: right;
            line-height: 0.13rem !important;
          }
        }
      }
      }
      .mission_info_nodata {
        display: flex;
        justify-content: center;
        align-items: center;
        p {
          font-family: Mediums;
          font-size: 0.15rem;
          color: #575757;
          letter-spacing: -0.58px;
          text-align: center;
          line-height: 0.16rem;
          font-weight: 700;
        }
      }
    }
    .my_mission_box_bootom {
      height: 0.44rem;
      display: block;
    }
  }
}
</style>
